<html>
<head>
	<style type="text/css">
		.box{
			position: absolute;
			height: 20px;
			width: 50px;
			border: 2px solid gray;
			overflow: hidden;
			text-align: center;
		}
		.item{
			position: absolute;
			height: 20px;
			top: 40px;
		}
		.active{
			top: 0px;
			animation: active-animation 3s 1;
		}
		.next{
			top: 20px;
			animation: next-animation 3s 1;
		}
		@keyframes active-animation{
			from {top:0px;}
			to {top:-20px;}
		}
		@keyframes next-animation{
			from {top:20px;}
			to {top:0px;}
		}
	</style>
</head>
<body>
	<p></p>
	<p></p>
	<div style="position: relative;">
		<div class="box">
			<div class="item active">first</div>
			<div class="item next">second</div>
			<div class="item">third</div>
			<div class="item">fourth</div>
			<div class="item">fifth</div>
		</div>
	</div>
	<script>
		function hasClass(obj, cls) {  
		    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
		}
		function addClass(obj, cls) {  
		    if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
		}  
		function removeClass(obj, cls) {  
		    if (hasClass(obj, cls)) {  
		        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
		        obj.className = obj.className.replace(reg, ' ').trim();  
		    }  
		}  

		function whichTransitionEvent(){
		    var el = document.createElement('fakeelement');
		    var transitions = {
		      'animationend':'animationend',
		      'OAnimation':'oAnimationEnd',
		      'MozAnimation':'animationend',
		      'WebkitAnimation':'webkitAnimationEnd'
		    }
		    for(var t in transitions){
		        if( el.style[t] !== undefined ){
		            return transitions[t];
		        }
		    }
		}

		var transitionEvent = whichTransitionEvent();
		
		var items = document.getElementsByClassName("item");
		var currentNextIndex = 1;

		if(transitionEvent){
			for(var i=0; i<items.length; i++){
				var item = items[i];
				item.addEventListener(transitionEvent, function(event){
					if(event.animationName === 'active-animation'){
						removeClass(event.target, 'active');
					}else if(event.animationName === 'next-animation'){
						removeClass(event.target, 'next');
						addClass(event.target, 'active');
						currentNextIndex = currentNextIndex===items.length-1? 0 : currentNextIndex+1;
						console.log(currentNextIndex, items[currentNextIndex]);
						addClass(items[currentNextIndex], 'next');
					}
				});
				
			}
		}
	</script>
</body>
</html>